<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar height="50" title="精选好货" title-size="36" title-color="#333"></u-navbar>
        <view class="tabView">
          <u-tabs
            :list="tabList"
            :is-scroll="false"
            active-color="#22B857"
            :current="current"
            @change="tabChange"
          ></u-tabs>
        </view>
      </view>
      <view class="itemListView">
        <view
          class="itemView"
          v-for="(item, index) in itemList"
          :key="index"
          @click="onDetail(item)"
        >
          <u-image width="100%" height="260" :src="item.cover_url"></u-image>
          <view class="itemTitle">{{ item.title }}</view>
          <view class="itemPriceView">
            <view class="itemPrice">¥{{ item.lowest_price }}</view>
            <u-icon size="38" name="/static/add.png"></u-icon>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      tabList: [],
      itemList: []
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    initData() {
      let self = this
      self.$u.api.getHighCategories().then((res) => {
        self.tabList = res.data
        self.$refs.paging.reload()
      })
    },
    tabChange(index) {
      this.current = index
      this.$refs.paging.reload()
    },
    queryList(page, pageSize) {
      let self = this
      let categoryId = this.tabList[this.current]?.id
      self.$u.api
        .getGoodsList({
          page: page,
          high_quality_product_category_id: categoryId,
          limit: pageSize
        })
        .then((res) => {
          self.$refs.paging.complete(res.list)
        })
        .catch((res) => {
          self.$refs.paging.complete()
        })
    },
    onDetail(item) {
      this.$utils.route({
        url: '/goods/goods-details/goods-details',
        params: {
          type: 1,
          id: item.id
        }
      })
    }
  }
}
</script>

<style>
@import url('all-goods.css');

page {
  background: #f5f5f5;
}
</style>
